import { Form, Input } from 'antd';
import React from 'react';
import styles from './FormItem.less';
import Rule from '../Rule';
import classnames from 'classnames';

export default (props: any) => {
  const { children, labelName, required, Rules = [], isLine = false } = props;
  const newRule = Rule({ required, Rules });

  return React.Children.map(children, (child) => {
    return (
      <div
        className={classnames({
          [styles.itemWrap]: true,
          [styles.isLine]: isLine,
        })}
      >
        <Form.Item
          name={labelName}
          colon={false}
          label={labelName}
          required={required}
          rules={newRule}
        >
          {React.cloneElement(child, {
            ...props,
          })}
        </Form.Item>
      </div>
    );
  });
};
